<template>
  <view class="page">
    <Navbar title="购物车" color="#222" bg-color="#F8F8F8" occupy>
      <!-- #ifdef MP-WEIXIN -->
      <view slot="right" style="margin-right: 180rpx" @click="changeManage">{{
        isManage ? "完成" : "管理"
      }}</view>
      <!-- #endif -->
      <!-- #ifndef MP-WEIXIN -->
      <view slot="right" @click="changeManage">{{ isManage ? "完成" : "管理" }}</view>
      <!-- #endif -->
    </Navbar>
    <Sub-title
      v-if="dataList.length > 0"
      :label="`购物车（共${dataList.length}件商品）`"
      :bold="false"
      color="#555"
      padding="20rpx 0"
    />
    <view class="goods-item" v-for="(i, k) in dataList" :key="k">
      <Sub-title
        :label="i.shop_name"
        size="28rpx"
        color="#555"
        padding="10rpx 0 30rpx 0"
        @click="handleShop(i)"
      >
        <u-icon slot="right" name="arrow-right" color="#555" />
      </Sub-title>
      <view class="p-row">
        <view style="margin-right: 20rpx">
          <u-image
            show-loading
            :show-menu-by-longpress="false"
            :src="i.checked ? checked : unCheck"
            width="32rpx"
            height="32rpx"
            @click="changeCheck(i)"
          />
        </view>
        <u-image
          show-loading
          :show-menu-by-longpress="false"
          :src="i.image"
          width="116rpx"
          height="116rpx"
          radius="10rpx"
          @click="handleDetail(i)"
        />
        <view class="r-flex">
          <u-text
            :text="i.title"
            color="#222"
            size="28rpx"
            bold
            @click="handleDetail(i)"
          />
          <u-text
            :text="i.sku.price"
            mode="price"
            color="#FF3E3E"
            size="28rpx"
            bold
            line-height="60rpx"
          />
          <view class="number-box">
            <u-icon name="minus" color="#BABABA" size="28rpx" @click="changeMinus(i)" />
            <text>{{ i.number }}</text>
            <u-icon name="plus" color="#BABABA" size="28rpx" @click="changePlus(i)" />
          </view>
        </view>
      </view>
    </view>
    <u-empty
      v-if="dataList.length == 0"
      :icon="webSrc('/assets/web_img/empty.png')"
      width="162"
      height="162"
      text="购物车暂无商品"
      text-color="#bababa"
    />
    <view class="btn">
      <view class="left">
        <u-icon
          :name="isAll ? checked : unCheck"
          size="32rpx"
          :label="isAll ? '取消' : '全选'"
          space="20rpx"
          label-color="#555555"
          label-size="24rpx"
          @click="handleAll"
        />
      </view>
      <view class="right">
        <template v-if="!isManage">
          <view class="right-count">
            <text
              >合计：<text style="color: #3ba199">{{ countPrice }}</text></text
            >
            <u-text text="不含运费" color="#555555" bold size="24rpx" />
          </view>
          <view class="right-btn" :class="{ disabled: !checkNum }" @click="checkout">
            去结算
            <text v-if="checkNum"> ({{ checkNum }})</text>
          </view>
        </template>
        <template v-else>
          <view @click="removeCart" class="right-btn-del">移除</view>
        </template>
      </view>
    </view>
  </view>
</template>
<script>
import Navbar from "@/components/Navbar/index";

import config from "@/request/baseUrl.js";
import { mallCart, mallReCart } from "@/request/mallApi.js";
export default {
  components: { Navbar },
  data() {
    return {
      checked: require("@/static/mall/checked2.png"),
      unCheck: require("@/static/mall/check.png"),
      dataList: [], // 数据列表
      isManage: false, // 管理 / 完成
    };
  },
  created() {
    this.getDataList();
  },
  computed: {
    // 全选
    isAll() {
      let unCheck = this.dataList.some((i) => !i.checked);
      return !unCheck;
    },
    // 选中数量
    checkNum() {
      let list = this.dataList.filter((i) => i.checked);
      return list.length;
    },
    // 金额
    countPrice() {
      let number = 0;
      let list = this.dataList.filter((i) => i.checked);
      list.forEach((i) => {
        number += parseFloat(i.sum);
      });
      return number.toFixed(2);
    },
  },
  methods: {
    // 获取数据列表
    getDataList() {
      let data = {
        cart: null,
      };
      mallCart(data).then((res) => {
        if (res.code == 1) {
          let list = res.data;
          let local = this.$getStorage("CART_LIST");
          list.forEach((i) => {
            i.image = config.baseUrl + i.image;
            i.checked = false;
            // if (local) {
            //   let current = local.find((b) => b.id == b.id);
            //   i.number = current.number;
            // } else {
            //   i.number = 1;
            // }
          });
          this.dataList = list;
        }
      });
    },
    // 切换管理/完成
    changeManage() {
      this.isManage = !this.isManage;
      if (!this.isManage) {
        this.dataList.forEach((i) => {
          i.checked = false;
        });
      }
    },
    // 勾选商品
    changeCheck(val) {
      val.checked = !val.checked;
    },
    // 全选/取消
    handleAll() {
      let val = this.isAll;
      this.dataList.forEach((i) => {
        i.checked = !val;
      });
    },
    // 移除商品车
    removeCart() {
      if (this.checkNum == 0) {
        uni.showToast({
          title: "请勾选商品",
          icon: "none",
        });
        return;
      }
      let list = this.dataList.filter((i) => i.checked);
      mallReCart({ data: list, type: "del" }).then((res) => {
        if (res.code == 1) {
          uni.showToast({
            title: "移除成功",
            icon: "none",
          });
          this.getDataList();
          this.changeManage();
        }
      });
    },
    // 跳转店铺
    handleShop(i) {
      uni.navigateTo({ url: "/pages/mall/goodsShop?id=" + i.shop_id });
    },
    // 跳转详情
    handleDetail(i) {
      uni.navigateTo({ url: "/pages/mall/goodsDetail?id=" + i.id });
    },
    // 减少数量
    changeMinus(val) {
      if (val.number <= 1) return;
      val.number--;
      val.sum = parseFloat(val.sum) - parseFloat(val.sku.price);
      let data = {
        goods_id: val.goods_id,
        number: val.number,
        sku_id: val.sku_id,
        sum: val.sum,
        type: "bcsub",
      };
      mallReCart(data).then((res) => {
        if (res.code == 1) {
        }
      });
    },
    // 增加数量
    changePlus(val) {
      if (val.number >= 99) return;
      val.number++;
      val.sum = parseFloat(val.sum) + parseFloat(val.sku.price);
      let data = {
        goods_id: val.goods_id,
        number: val.number,
        sku_id: val.sku_id,
        sum: val.sum,
        type: "bcadd",
      };
      mallReCart(data).then((res) => {
        if (res.code == 1) {
        }
      });
    },
    // 去结算
    checkout() {
      if (!this.checkNum) return;
      let list = this.dataList.filter((i) => i.checked);
      console.log(list);
      let data = list.map((i) => {
        return {
          goods_id: i.goods_id,
          number: i.number,
          sku_id: i.sku_id,
        };
      });
      this.$author(() => {
        uni.redirectTo({
          url: `/pages/mall/goodsOrder?data=${JSON.stringify(data)}&from=cart`,
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx;
  .goods-item {
    background: #ffffff;
    box-shadow: 0 0 20rpx rgba(186, 186, 186, 0.2);
    padding: 20rpx;
    border-radius: 10px;
    margin-bottom: 30rpx;
    position: relative;
    .p-row {
      display: flex;
      justify-content: start;
      align-items: center;
      .r-flex {
        flex: 1;
        height: 116rpx;
        margin-left: 20rpx;
      }
    }
    .number-box {
      position: absolute;
      right: 20rpx;
      bottom: 20rpx;
      width: auto;
      min-width: 100rpx;
      height: 44rpx;
      line-height: 44rpx;
      padding: 0 14rpx;
      background-color: #f5f5f5;
      border-radius: 44rpx;
      font-size: 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .btn {
    position: fixed;
    background-color: #fff;
    box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    height: 126rpx;
    padding: 20rpx;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
    .left {
      width: 110rpx;
    }
    .right {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .right-count {
        color: #555555;
        font-weight: 600;
        font-size: 24rpx;
        margin-right: 20rpx;
      }
      .right-btn {
        width: 274rpx;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 28rpx;
        text-align: center;
        color: #fff;
        background-color: $active-color;
        border-radius: 40rpx;
      }
      .right-btn-del {
        width: 274rpx;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 28rpx;
        text-align: center;
        color: #fe6600;
        background-color: #fff;
        border: 1rpx solid #fe6600;
        border-radius: 40rpx;
      }
      .disabled {
        color: #cacaca;
        background-color: #f8f8f8;
      }
    }
  }
}
</style>
